<template>
  <div>
    <nav-top title="分类管理" />
    <h2>点击删除以下频道</h2>
    <div class="activeList">
      <div
        class="item"
        v-for="(category, index) of categoryList"
        :key="category.id"
        @click="deleteCategory(category, index)"
      >
        {{ category.name }}
      </div>
    </div>
    <h2>点击添加以下频道</h2>
    <div class="deactiveList">
      <div
        class="item"
        v-for="(decategory, index) of decategoryList"
        :key="decategory.id"
        @click="addCategory(decategory, index)"
      >
        {{ decategory.name }}
      </div>
    </div>
  </div>
</template>

<script>
import NavTop from "../../components/NavTop";
export default {
  name: "Category",
  components: {
    NavTop,
  },
  data() {
    return {
      categoryList: [],
      decategoryList: [],
    };
  },
  watch: {
    categoryList() {
      window.localStorage.setItem(
        "categoryList",
        JSON.stringify(this.categoryList)
      );
    },
    decategoryList() {
      window.localStorage.setItem(
        "decategoryList",
        JSON.stringify(this.decategoryList)
      );
    },
  },
  mounted() {
    let categoryList = JSON.parse(window.localStorage.getItem("categoryList"));
    let decategoryList = JSON.parse(
      window.localStorage.getItem("decategoryList")
    );
    if (categoryList.length) {
      if (decategoryList.length) {
        this.decategoryList = decategoryList;
      }
      this.categoryList = categoryList;
    } else {
      this.getCategory();
    }
  },

  methods: {
    getCategory() {
      this.$axios.get("/category").then((res) => {
        this.categoryList = res.data.data;
      });
    },
    deleteCategory(category, index) {
      if (this.categoryList.length > 1) {
        this.categoryList.splice(index, 1);
        this.decategoryList.push(category);
      } else {
        this.$toast.fail("至少有一个分类");
      }
    },
    addCategory(decategory, index) {
      this.categoryList.push(decategory);
      this.decategoryList.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="less">
h2 {
  font-size: 14/360 * 100vw;
  font-weight: 400;
  color: #666;
  padding: 0 10/360 * 100vw;
}
.activeList,
.deactiveList {
  padding: 10/360 * 100vw;
  font-size: 18/360 * 100vw;
  display: flex;
  flex-wrap: wrap;
  .item {
    border: 1px solid #888;
    padding: 6/360 * 100vw 13/360 * 100vw;
    margin: 10/360 * 100vw;
  }
}
</style>
